<!--
 * @File name:
 * @Author: 1079161148@qq.com
 * @Version: V1.0
 * @Date: 2025-02-28 14:35:02
 * @Description:
 * Copyright (C) 2024-{year} Tsing Micro Technology Inc All rights reserved.
-->
<template>
  <basic-layout title="发现" class="discover-layout">
    <div class="discover-content">
      <!-- 功能卡片列表 -->
      <div class="feature-cards">
        <!-- 朋友圈卡片 -->
        <div class="feature-card moments" @click="router.push('/friend')">
          <div class="card-content">
            <div class="icon-wrapper">
              <van-icon name="photograph" />
              <span class="badge" v-if="unreadCount">{{ unreadCount }}</span>
            </div>
            <span class="title">朋友圈</span>
          </div>
          <van-icon name="arrow" class="arrow" />
        </div>

        <!-- 其他功能卡片 -->
        <div class="feature-card scan" @click="router.push('/scan')">
          <div class="card-content">
            <div class="icon-wrapper">
              <van-icon name="scan" />
            </div>
            <span class="title">扫一扫</span>
          </div>
          <van-icon name="arrow" class="arrow" />
        </div>

        <div class="feature-card shake">
          <div class="card-content">
            <div class="icon-wrapper">
              <van-icon name="phone-circle-o" />
            </div>
            <span class="title">摇一摇</span>
          </div>
          <van-icon name="arrow" class="arrow" />
        </div>

        <div class="feature-card look" @click="router.push('/moments')">
          <div class="card-content">
            <div class="icon-wrapper">
              <van-icon name="eye-o" />
            </div>
            <span class="title">看一看</span>
          </div>
          <van-icon name="arrow" class="arrow" />
        </div>

        <!-- 搜一搜卡片 -->
        <div class="feature-card search" @click="router.push('/search')">
          <div class="card-content">
            <div class="icon-wrapper">
              <van-icon name="search" />
            </div>
            <span class="title">搜一搜</span>
          </div>
          <van-icon name="arrow" class="arrow" />
        </div>

        <div class="feature-card nearby" @click="router.push('/live')">
          <div class="card-content">
            <div class="icon-wrapper">
              <van-icon name="location-o" />
            </div>
            <span class="title">直播和附近</span>
          </div>
          <van-icon name="arrow" class="arrow" />
        </div>
      </div>
    </div>
  </basic-layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import BasicLayout from '@/components/layout/BasicLayout.vue'

const router = useRouter()
const unreadCount = ref(3) // 模拟未读消息数
</script>

<style lang="less" scoped>
@import '@/styles/common.less';

.discover-layout {
  background: #f7f8fa;
  min-height: 100vh;

  .discover-content {
    padding: 12px 16px;
  }

  .feature-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 8px 0;

    .feature-card {
      position: relative;
      height: 120px;
      padding: 20px;
      background: #fff;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1));
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

        &::before {
          opacity: 1;
        }

        .icon-wrapper {
          transform: scale(1.1);
        }

        .arrow {
          transform: translate(4px, -50%);
        }
      }

      .card-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        text-align: center;
        width: 100%;

        .icon-wrapper {
          position: relative;
          width: 56px;
          height: 56px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 0.3s ease;

          .van-icon {
            font-size: 32px;
            color: #fff;
          }

          .badge {
            position: absolute;
            top: -8px;
            right: -8px;
            min-width: 18px;
            height: 18px;
            padding: 0 6px;
            border-radius: 9px;
            background: #ee0a24;
            color: #fff;
            font-size: 12px;
            line-height: 18px;
            text-align: center;
          }
        }

        .title {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-top: auto;
        }
      }

      .arrow {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        font-size: 16px;
        transition: transform 0.3s ease;
      }

      // 不同功能卡片的主题色
      &.moments .icon-wrapper {
        background: linear-gradient(135deg, #1989fa, #0961d3);
      }

      &.scan .icon-wrapper {
        background: linear-gradient(135deg, #07c160, #05a54d);
      }

      &.shake .icon-wrapper {
        background: linear-gradient(135deg, #ff9800, #f57c00);
      }

      &.look .icon-wrapper {
        background: linear-gradient(135deg, #9c27b0, #7b1fa2);
      }

      &.search .icon-wrapper {
        background: linear-gradient(135deg, #00bcd4, #0097a7);
      }

      &.nearby .icon-wrapper {
        background: linear-gradient(135deg, #f44336, #d32f2f);
      }
    }
  }
}

// 添加进入动画
.discover-group {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
